<template>
	<view class="">
		<uform v-model="form" ref="uform" :config="config" :rules="rules" label-position="top">
			<view slot="ss_dl" slot-scope="{data}">
				<!-- <uni-datetime-picker :disabled="data.extra.disabled" type="datetime"
					v-model="form.ss_dl">
				</uni-datetime-picker>
				<view >
					<uni-data-select v-model="form.zr_dw33" :localdata="dicts.case_level"></uni-data-select>
				</view> -->
			</view>
			<view class="" slot="test" slot-scope="{data}">
				13 {{ data }}
			</view>
		</uform>
		<uni-button @click="sub">按钮</uni-button>
		<uni-button @click="read">只读</uni-button>
	</view>
</template>

<script>
import uform from './uni-uform.vue'
export default {
	components: {
		uform,
	},
	dicts:['case_level'],
	watch: {
		config: {
			handler: function () {
			}
		}
	},
	data() {
		let self = this
		return {
			form: { // 建议申明属性与config数组的name保持一致
				ss_bm: '1',
				ss_dl: 1,
				ss_xl: 1,
				ss_bm: '1',
				zr_dw: '2',
				email: '',
				number: 10,
				zr_dw33:'1'
			},
			config: [{
				name: 'ss_dl',
				label: '设施大类',
				component: 'uni-data-select', // 注册组件同名 全局的一般是component文件夹自动注册，自定义组件可以放这个文件夹
				extra: { // 组件属性
					style: 'background-color: #fff;',
					placeholder: "请选择设施大类",
					localdata: []
				},
				event: { //推荐箭头函数这样方便和组件交互 组件方法 与组件库方法保持一致 自定义组件也保持一致 
					change: function (e) {
						console.log(e)
					},
					input: function (e) {
						console.log(e)
					},
					maskClick: function (e) {
						console.log(e, 'ss')
					},
				},
				init(){
					
				}
			},
			{
				name: 'ss_xl',
				label: '设施小类',
				component: 'uni-data-select',
				extra: {
					style: 'background-color: #fff;',
					placeholder: "请选择设施小类",
					localdata: []
				},
				event: {
					change: (e) => { // 操作 form字段的示例 改变config
						console.log(e, 'ss1', this)
						let {
							index,
							item
						} = this.getItem('email')
						this.delform[index] = item
						this.config.splice(index, 1)
						this.read()
						setTimeout(() => {
							this.config.splice(index, 0, this.delform[index])
						}, 5000)
					}
				}
			},
			{
				name: 'ss_bm',
				label: '设施编码',
				component: 'uni-easyinput',
				extra: {
					type: "text",
					placeholder: "请选择设施编码",
				},
				event: {
					change: function (e) {
						console.log(e)
					},
					input: function (e) {
						console.log(e)
					}
				}
			},
			{
				name: 'zr_dw',
				label: '责任单位',
				component: 'uni-easyinput',
				extra: {
					placeholder: "请选择责任单位",
				},
				event: {
					change: function (e) {
						console.log(e)
					}
				}
			},
			{
				name: 'email',
				label: '邮箱',
				component: 'uni-easyinput',
				extra: {
					placeholder: "请选择设施大类",
				},
				event: {
					change: function (e) {
						console.log(e)
					}
				}
			},
			{
				label: '数字',
				name: 'number', // name必传 与 form属性 同名保持一致
				// isSlot:true,
				component: 'uni-number-box',
				extra: {
					// type: 'date'
					// placeholder: "请选择设施大类",
					background: "#2979FF",
					color: "#fff"
				},
			},
			{
				label: '测试',
				name: 'test', // name必传 与 form属性 同名保持一致
				isSlot: true,
				extra: {
					type: 'date'
					// placeholder: "请选择设施大类",
				},
			}
			],
			rules: {
				ss_dl: {
					rules: [{
						required: true,
						errorMessage: '不能为空',
					}]
				},
				// 对name字段进行必填验证
				ss_bm: {
					rules: [{
						required: true,
						errorMessage: '不能为空',
					},
					{
						minLength: 3,
						maxLength: 10,
						errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
					}
					]
				},
				// 对email字段进行必填验证
				email: {
					rules: [{
						format: 'email',
						required: true,
						errorMessage: '请输入正确的邮箱地址',
					}]
				}
			},
			delform: {}
		}
	},
	mounted() {
		setTimeout(() => {
			let object = {
				ss_bm: '22',
				ss_dl: '2021-04-3',
				ss_xl: 1,
				ss_bm: '2',
				zr_dw: '3',
				email: '',
				number: 20
			}

			for (const key in object) { // 推荐用循环 这样不会失去响应式
				if (Object.hasOwnProperty.call(object, key)) {
					this.$set(this.form, key, object[key])
				}
			}
			setTimeout(() => {
				let {
					item
				} = this.getItem('ss_xl')
				item.extra.localdata = [{
					value: 0,
					text: "篮球"
				},
				{
					value: 1,
					text: "足球"
				},
				{
					value: 2,
					text: "游泳"
				},
				]
			}, 1000)
		}, 2000)
	},
	methods: {
		sub() {
			let form = this.$refs.uform.getForm()
			form.validate().then(res => {
				console.log('表单数据信息：', res, this.form);
			}).catch(err => {
				console.log('表单错误信息：', err);
			})
		},
		read() {
			let {
				item
			} = this.getItem('ss_dl')
			item.extra.disabled = !item.extra.disabled
		},
		getItem(name) {
			return {
				item: this.config.find(res => res.name === name),
				index: this.config.findIndex(res => res.name === name)
			}
		},
		getItems(arr=[]) {
			let obj = {}
			arr.map(res=>{
				obj[res] = this.getItem(res)
			})
			return obj
		}
	}
}
</script>

<style></style>